<script setup>
import {
    getShoppingListApi,
    addCartApi,
    updateCartApi,
    clearCartApi,
    getSeatsListApi,
    submitOrderApi
} from '@/api/user/Shopping.js'
import { ref } from 'vue'
import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
import {
    Plus,
    Minus
} from '@element-plus/icons-vue'

const shoppingList = ref();
const shoppingzj = ref(0);
const getShoppingList = async () => {
    let result = await getShoppingListApi();
    if (result.code === 1) {
        shoppingList.value = result.data;
        zj();
        return;
    } else {
        return;
    }
}
const zj = () => {
    let s = 0;
    shoppingList.value.forEach((item) => {
        s = s + parseInt(item.amount) * parseInt(item.number);
    })
    shoppingzj.value = s;
}
getShoppingList();
const getImage = (image) => {
    return `/api/common/download?name=${image}`
}
const clearCart = async () => {
    let result = await clearCartApi();
    if (result.code === 1) {
        ElMessage.success(result.data);
        getShoppingList();
        return;
    } else {
        getShoppingList();
        return;
    }
}
const addCart = async (data) => {
    let result = await addCartApi(data);
    if (result.code === 1) {
        ElMessage.success(result.data);
        getShoppingList();
        return;
    } else {
        getShoppingList();
        return;
    }
}
const updateCart = async (data) => {
    let result = await updateCartApi(data);
    if (result.code === 1) {
        ElMessage.success(result.data);
        getShoppingList();
        return;
    } else {
        getShoppingList();
        return;
    }
}
const SeatsList = ref()
const getSeatsList = async (data) => {
    let result = await getSeatsListApi(data);
    if (result.code === 1) {
        SeatsList.value = result.data;
        return;
    } else {
        ElMessage.error('服务异常')
        return;
    }
}
const js = async () => {
    getShoppingList();
    getSeatsList();
    drawer.value = true;
}
const drawer = ref(false)
const odata = ref({
    seatsId: null,
    // 1微信,2支付宝
    payMethod: '1'
})
function qc() {
    odata.value.payMethod = '1';
    odata.value.seatsId = null;
}
function cancelClick() {
    drawer.value = false
    qc()
    ElMessage.info('退出确认订单页')
}
function confirmClick() {
    ElMessageBox.confirm(`确认支付 ${(shoppingzj.value/100)} ?`)
        .then(() => {
            if (odata.value.seatsId == null) {
                ElMessage.error('请选择餐位!!!')
                return;
            } else {
                // 添加订单数据
                odata.value.payMethod = Number(odata.value.payMethod);
                submitOrder();
                drawer.value = false
                qc()
            }
        })
        .catch(() => {
            qc()
            // catch error
        })
}
const submitOrder = async () => {
    let result = await submitOrderApi(odata.value);
    if (result.code === 1) {
        ElNotification({
            title: result.data,
            message: '付款成功,您的餐品待上餐!',
            duration: 0,
        })
        getShoppingList();
        return;
    } else {
        ElMessage.error('服务异常')
        return;
    }
}
</script>

<template>
    <el-affix position="top" :offset="60">
        <el-card shadow="never">
            <div class="card-tw">
                <el-text tag="b" class="txt">购物车</el-text>
                <el-button type="warning" size="large" plain @click="clearCart()">清空购物车</el-button>
            </div>
        </el-card>
    </el-affix>
    <el-card shadow="never">
        <el-card v-for="sl in shoppingList" style="margin-bottom: 10px;">
            <el-row :gutter="2">
                <el-col :span="8">
                    <div>
                        <el-image style="width: 80px; height: 80px" :src="getImage(sl.image)" :fit="fit" />
                    </div>
                </el-col>
                <el-col :span="16">
                    <div>
                        <el-text tag="b" type="primary" style="font-size: 20px;" line-clamp="1">{{ sl.name }}</el-text>
                        <br />
                        <el-text type="warning" style="font-size: 18px;">￥:{{ (sl.amount) / 100 }}</el-text>
                        <br />
                        <div style="text-align: right;">
                            <el-button :icon="Minus" circle size="small" @click="updateCart(sl)" />
                            <el-text type="info" style="font-size: 18px;">份数:{{ sl.number }}</el-text>
                            <el-button :icon="Plus" circle size="small" @click="addCart(sl)" />
                        </div>
                    </div>
                </el-col>
                <div v-if="sl.dishFlavor != null">
                    <el-text type="info" size="small">修改口味请从浏览重新添加!!!</el-text><br />
                    <el-tag v-for="tag in sl.dishFlavor.split(',')" :key="tag">
                        {{ tag }}
                    </el-tag>
                </div>
            </el-row>
        </el-card>
    </el-card>
    <el-affix position="bottom" :offset="60">
        <el-card shadow="never">
            <div class="card-tw" style="height: 5vh;">
                <el-text class="txt" type="info">商品总价:￥
                    <el-text class="txt" type="primary">{{ shoppingzj / 100 }}</el-text>
                </el-text>
                <el-button type="success" plain size="large" @click="js()">结算</el-button>
            </div>
        </el-card>
    </el-affix>
    <el-drawer v-model="drawer" title="确认订单" :close-on-click-modal="false" :close-on-press-escape="false"
        :show-close="false" direction='btt' size="100%">
        <el-form :model="odata" label-position="top" label-width="100px">
            <el-form-item label="餐位选择:">
                <template v-if="SeatsList && SeatsList.length > 0">
                    <el-select v-model="odata.seatsId" placeholder="Select" size="large">
                        <el-option v-for="item in SeatsList" :key="item.id" :label="item.name + '-' + item.number + '人座'"
                            :value="item.id" />
                    </el-select>
                </template>
                <template v-else>
                    <h4>无空闲餐位</h4>
                </template>
            </el-form-item>
            <el-form-item label="支付方式:">
                <el-radio-group v-model="odata.payMethod">
                    <el-radio label='1' size="large">微信</el-radio>
                    <el-radio label='2' size="large">支付宝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="您的商品:">
                <el-card v-for="sl in shoppingList" style="margin-bottom: 10px;width: 100%;">
                    <el-row :gutter="2">
                        <el-col :span="8">
                            <div>
                                <el-image style="width: 80px; height: 80px" :src="getImage(sl.image)" :fit="fit" />
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div>
                                <el-text tag="b" type="primary" style="font-size: 20px;" line-clamp="1">{{ sl.name
                                }}</el-text>
                                <br />
                                <el-text type="warning" style="font-size: 18px;">￥:{{ (sl.amount) / 100 }}</el-text>
                                <br />
                                <div style="text-align: right;">
                                    <el-text type="info" style="font-size: 18px;">份数:{{ sl.number }}</el-text>
                                </div>
                            </div>
                        </el-col>
                        <div v-if="sl.dishFlavor != null">
                            <el-text type="info" size="small">修改口味请从浏览重新添加!!!</el-text><br />
                            <el-tag v-for="tag in sl.dishFlavor.split(',')" :key="tag">
                                {{ tag }}
                            </el-tag>
                        </div>
                    </el-row>
                </el-card>
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style lang="scss" scoped>
.card-tw {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txt {
    font-size: 18px;
}
</style>